<template>
    <el-dialog v-dialogDrag class="tiny-mce-dialog"  :modal="true" :show-close="false" :title="'关联车辆'" width="410px" :visible.sync="isShow" @close="cancel" :close-on-click-modal="false">
     <!-- <vue-scroll>-->
      <el-form :inline="true" :model="query" :label-position="'left'" class="demo-form-inline" size="mini">
          <el-row>
            <el-form-item label="手机号">
              <el-input v-model="query.phone" clearable placeholder="手机号" style="width: 150px;" class="filter-item" @keyup.enter.native="search()" />
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="search()">查询</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!--表格渲染-->
        <el-table ref="table" border :data="data" height="350px" size="mini" @selection-change="handleSelectionChange">
          <el-table-column type="selection"  width="42" align="center" />
          <el-table-column prop="carNumber" width="110" align="center"  label="车牌号" show-overflow-tooltip />
          <el-table-column prop="typeName" width="140" align="center" label="车辆类型" show-overflow-tooltip />
          <el-table-column prop="carLength" align="center" label="车辆长度" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.carNum | nullFilter}}
            </template>
          </el-table-column>
        </el-table>
    <!--  </vue-scroll>-->
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="info" @click="cancel">关 闭</el-button>
        <el-button size="mini" type="primary" @click="operation">关联车辆</el-button>
      </div>
    </el-dialog>
</template>

<script>


  export default {
    name: 'CreateStaff',
    props: ['showFormInfoPanel', 'item'],
    data () {
      return {
        size: this.pageSize,
        status: [
          {key: '全部',value: null},
          {key: '进行中',value: 1},
          {key: '已完成',value: 2},
        ],
        sizeArray: [10,20,50,100],
        merchant: [],
        multipleSelection: [],
        tableHeight: null,
        page: 1,
        total: 0,
        loading:false,
        data:[],
        query:{},
        isShow: this.showFormInfoPanel
      }
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      handleSizeChange (val) {
        this.size = val
        this.search()
      },
      handleCurrentChange (val) {
        this.page = val
        this.search()
      },
      operation() {
        let self = this
        let updateData = this.multipleSelection
        if (updateData.length === 0) {
          self.$message({
            message: '请选择关联的车辆',
            type: 'warning'
          })
        } else {
          let carOwnerId = []
          updateData.forEach(d =>{
            carOwnerId.push(d.carOwnerId);
          })
          let par = {
            ownerDrivingId: self.item.ownerDrivingId,
            drivingUserId: self.item.drivingUserId,
            carUserId: self.item.carUserId,
            carOwnerId: carOwnerId
          }
          self.$http.post("/api/driverManageMerchant/relevance",par).then(function(value) {
            if (value.ok) {
              self.$message({
                message: '关联成功',
                type: 'warning'
              })
              self.cancel()
            }
          })
        }
      },
      search(){
        let self = this
        self.query.drivingUserId = self.item.drivingUserId
        self.query.carUserId = self.item.carUserId
        self.$http.post("/api/driverList/findDriverCar",self.query).then(function(res) {
          if (res.ok){
            self.data = res.data.driverOwnerViews
          }
        }).catch(function (error) {
          console.log(error)
        })
      },
      cancel () {
        this.isShow = false
        this.$emit('update:showFormInfoPanel', this.isShow)
      }
    },
    mounted: function () {
      this.search()
    }
  }
</script>

<style lang="scss" scoped>
</style>
